<div class="app-sys-info-container">

    <div nz-row>

        <div nz-col nzXs="24" nzSm="24" nzMd="14" nzLg="16" nzXl="18">
            <nz-card class="app-sys-info-left-container" [nzBordered]="false" appScrollbar appContainerCss>
                <div>
                    <app-line-title title="磁盘信息"></app-line-title>
                    <nz-card [nzBordered]="true" class="app-disk-item app-margin-top15"
                        *ngFor="let item of sysInfoData?.diskInfo || []">
                        <div class="app-flex">
                            <i nz-icon nzType="platform:img/sys-info/disk" nzTheme="outline"></i>
                            <div class="app-disk-progress">
                                <div class="app-disk-path">
                                    盘符路径：{{item.dirName || '未知'}}，盘符类型：{{item.sysTypeName || '未知'}}，已使用百分比：{{item.usage
                                    || '0'}}%
                                </div>
                                <div class="app-disk-progress-bar">
                                    <nz-progress [nzPercent]="item.usage" [nzShowInfo]="false" [nzStrokeWidth]="15">
                                    </nz-progress>
                                </div>
                            </div>
                        </div>
                        <nz-descriptions nzBordered [nzColumn]="{ xxl: 2, xl: 2, lg: 1, md: 1, sm: 1, xs: 1 }"
                            [nzSize]="'small'" class="app-margin-top15">
                            <nz-descriptions-item nzTitle="文件系统：">{{item.typeName || '未知'}}
                            </nz-descriptions-item>
                            <nz-descriptions-item nzTitle="总容量：">{{item.total || '未知'}}
                            </nz-descriptions-item>
                            <nz-descriptions-item nzTitle="已用容量：">{{item.used || '未知'}}
                            </nz-descriptions-item>
                            <nz-descriptions-item nzTitle="可用容量：">{{item.free || '未知'}}
                            </nz-descriptions-item>
                        </nz-descriptions>
                    </nz-card>
                </div>

                <div class="app-sys-info-left-row">
                    <app-line-title title="服务器信息"></app-line-title>
                    <nz-card [nzBordered]="true" class="app-computer-item app-margin-top15">
                        <nz-descriptions nzBordered [nzColumn]="{ xxl: 2, xl: 2, lg: 1, md: 1, sm: 1, xs: 1 }">
                            <nz-descriptions-item nzTitle="服务器名称：">
                                {{sysInfoData?.computerInfo?.computerName || '未知'}}
                            </nz-descriptions-item>
                            <nz-descriptions-item nzTitle="服务器IP：">
                                {{sysInfoData?.computerInfo?.computerIp || '未知'}}
                            </nz-descriptions-item>
                            <nz-descriptions-item nzTitle="操作系统：">{{sysInfoData?.computerInfo?.osName || '未知'}}
                            </nz-descriptions-item>
                            <nz-descriptions-item nzTitle="系统架构：">{{sysInfoData?.computerInfo?.osArch || '未知'}}
                            </nz-descriptions-item>
                        </nz-descriptions>
                    </nz-card>
                </div>

                <div class="app-sys-info-left-row">
                    <app-line-title title="JVM信息"></app-line-title>
                    <nz-card [nzBordered]="true" class="app-jvm-item app-margin-top15">
                        <nz-descriptions nzBordered [nzColumn]="{ xxl: 2, xl: 2, lg: 1, md: 1, sm: 1, xs: 1 }"
                            nzLayout="vertical">
                            <nz-descriptions-item nzTitle="JAVA名称：">
                                {{sysInfoData?.jvmInfo?.name || '未知'}}
                            </nz-descriptions-item>
                            <nz-descriptions-item nzTitle="JAVA版本：">
                                {{sysInfoData?.jvmInfo?.version || '未知'}}
                            </nz-descriptions-item>
                            <nz-descriptions-item nzTitle="启动时间：">{{sysInfoData?.jvmInfo?.startTime || '未知'}}
                            </nz-descriptions-item>
                            <nz-descriptions-item nzTitle="运行时长：">{{sysInfoData?.jvmInfo?.runTime || '未知'}}
                            </nz-descriptions-item>
                            <nz-descriptions-item nzTitle="安装目录：">{{sysInfoData?.jvmInfo?.home || '未知'}}
                            </nz-descriptions-item>
                            <nz-descriptions-item nzTitle="项目路径：">{{sysInfoData?.computerInfo?.userDir || '未知'}}
                            </nz-descriptions-item>
                        </nz-descriptions>
                    </nz-card>
                </div>

            </nz-card>
        </div>

        <div nz-col nzXs="24" nzSm="24" nzMd="10" nzLg="8" nzXl="6" class="app-sys-info-right-container" appScrollbar
            appContainerCss>
            <nz-card [nzBordered]="false">

                <div>
                    <app-line-title title="CPU信息"></app-line-title>

                    <nz-card [nzBordered]="false" class="app-cpu-item app-cpu-number app-margin-top15">
                        <div class="app-flex">
                            <i nz-icon nzType="platform:icon/cpu" nzTheme="outline"></i>
                            <div class="app-flex app-flex-direction-column">
                                <div class="app-cpu-label">CPU核心数</div>
                                <div class="app-cpu-count" appFlop [data]="sysInfoData?.cpuInfo?.cpuNum"
                                    #cpuNum="letData">
                                    {{cpuNum.outputData || '0'}}个
                                </div>
                            </div>
                        </div>
                    </nz-card>

                    <nz-card [nzBordered]="false" class="app-cpu-item app-cpu-sys">
                        <div class="app-flex">
                            <i nz-icon nzType="platform:icon/cpu" nzTheme="outline"></i>
                            <div class="app-flex app-flex-direction-column">
                                <div class="app-cpu-label">系统使用率</div>
                                <div class="app-cpu-count" appFlop [data]="sysInfoData?.cpuInfo?.sys" #sys="letData">
                                    {{sys.outputData || '0.0'}}%
                                </div>
                            </div>
                        </div>
                    </nz-card>

                    <nz-card [nzBordered]="false" class="app-cpu-item app-cpu-used">
                        <div class="app-flex">
                            <i nz-icon nzType="platform:icon/cpu" nzTheme="outline"></i>
                            <div class="app-flex app-flex-direction-column">
                                <div class="app-cpu-label">用户使用率</div>
                                <div class="app-cpu-count" appFlop [data]="sysInfoData?.cpuInfo?.used" #used="letData">
                                    {{used.outputData || '0.0'}}%
                                </div>
                            </div>
                        </div>
                    </nz-card>

                    <nz-card [nzBordered]="false" class="app-cpu-item app-cpu-free">
                        <div class="app-flex">
                            <i nz-icon nzType="platform:icon/cpu" nzTheme="outline"></i>
                            <div class="app-flex app-flex-direction-column">
                                <div class="app-cpu-label">当前空闲率</div>
                                <div class="app-cpu-count" appFlop [data]="sysInfoData?.cpuInfo?.free" #free="letData">
                                    {{free.outputData || '0.0'}}%
                                </div>
                            </div>
                        </div>
                    </nz-card>
                </div>

                <div class="app-sys-info-right-row">
                    <app-line-title title="内存信息"></app-line-title>

                    <nz-card [nzBordered]="false" class="app-memory-item app-memory-total app-margin-top15">
                        <div class="app-flex">
                            <i nz-icon nzType="platform:icon/memory" nzTheme="outline"></i>
                            <div class="app-flex app-flex-direction-column">
                                <div class="app-memory-title">总内存</div>
                                <div class="app-memory-label">系统：{{sysInfoData?.memoryInfo?.total || '0'}}G</div>
                                <div class="app-memory-jvm-label">JVM：{{sysInfoData?.jvmInfo?.total || '0'}}M</div>
                            </div>
                        </div>
                    </nz-card>

                    <nz-card [nzBordered]="false" class="app-memory-item app-memory-used">
                        <div class="app-flex">
                            <i nz-icon nzType="platform:icon/memory" nzTheme="outline"></i>
                            <div class="app-flex app-flex-direction-column">
                                <div class="app-memory-title">已用内存</div>
                                <div class="app-memory-label">系统：{{sysInfoData?.memoryInfo?.used || '0'}}G</div>
                                <div class="app-memory-jvm-label">JVM：{{sysInfoData?.jvmInfo?.used || '0'}}M</div>
                            </div>
                        </div>
                    </nz-card>

                    <nz-card [nzBordered]="false" class="app-memory-item app-memory-free">
                        <div class="app-flex">
                            <i nz-icon nzType="platform:icon/memory" nzTheme="outline"></i>
                            <div class="app-flex app-flex-direction-column">
                                <div class="app-memory-title">剩余内存</div>
                                <div class="app-memory-label">系统：{{sysInfoData?.memoryInfo?.free || '0'}}G</div>
                                <div class="app-memory-jvm-label">JVM：{{sysInfoData?.jvmInfo?.free || '0'}}M</div>
                            </div>
                        </div>
                    </nz-card>

                    <nz-card [nzBordered]="false" class="app-memory-item app-memory-usage">
                        <div class="app-flex">
                            <i nz-icon nzType="platform:icon/memory" nzTheme="outline"></i>
                            <div class="app-flex app-flex-direction-column">
                                <div class="app-memory-title">内存使用率</div>
                                <div class="app-memory-label">系统：{{sysInfoData?.memoryInfo?.usage || '0'}}%</div>
                                <div class="app-memory-jvm-label">JVM：{{sysInfoData?.jvmInfo?.usage || '0'}}%</div>
                            </div>
                        </div>
                    </nz-card>
                </div>

            </nz-card>
        </div>
    </div>
</div>